<!--商城页面-->
<template>
<div>
    <div class="page">
        <!--头部-->
        <header class="header">
            <span class="header-item location" @click="positioning">
                <van-icon name="location-o" class="location-icon"/>
                <span class="location-text">{{myPosition}}</span>
            </span>
            <span class="header-item scan-share-content">
                <!-- <span class="scan-icon"></span> -->
                <span class="share-icon"></span>
            </span>
        </header>
        <!--搜索-->
        <div class="search">
            <van-cell-group class="search-content">
                <van-field
                  class="inputa"
                  v-model="searchText"
                  center
                  clearable
                  placeholder="输入关键词搜索"
                >
                    <van-button @click="search1" slot="button" size="normal" class="camera-content">
                        <van-icon name="search" size="20px"/>
                    </van-button>
                </van-field>
            </van-cell-group>
            <!-- <div class="bginput"></div> -->
        </div>
        <!--轮播-->
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="../assets/images/banner/banner.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../assets/images/banner/banner.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../assets/images/banner/banner.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="../assets/images/banner/banner.png" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--快捷导航-->
        <div class="nav-list">
            <van-swipe indicator-color="#F52E67" :loop="navLoop">
                <van-swipe-item class="nav-item-container">
                    <span @click="toxpcx" class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/new.png" alt="">
                        <span class="nav-text">新品尝鲜</span>
                    </span>
                    <span  @click="toptqg" class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/tuan.png" alt="">
                        <span class="nav-text">拼团抢购</span>
                    </span>
                    <span @click="toxsqg" class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/time.png" alt="">
                        <span class="nav-text">限时抢购</span>
                    </span>
                    <span @click="tolhb" class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/redbag.png" alt="">
                        <span class="nav-text">抽奖领红包</span>
                    </span>
                    <span @click="totxzq" class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/texiang.png" alt="">
                        <span class="nav-text">特享专区</span>
                    </span>
                </van-swipe-item>
                <van-swipe-item>
                    <span class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/member.png" alt="">
                        <span class="nav-text">会员专区</span>
                    </span>
                    <span class="nav-item" @click="classe">
                        <img class="item-img" src="../assets/images/navlist/category.png" alt="">
                        <span class="nav-text">分类专区</span>
                    </span>
                    <span class="nav-item">
                        <img class="item-img" src="../assets/images/navlist/beauty.png" alt="">
                        <span class="nav-text">美妆系列</span>
                    </span>
                    <span class="nav-item" @click="tofoodzhuanqu">
                        <img class="item-img" src="../assets/images/navlist/food.png" alt="">
                        <span class="nav-text">食品系列</span>
                    </span>
                    <span class="nav-item" @click="toshengxianzhuanqu">
                        <img class="item-img" src="../assets/images/navlist/fresh.png" alt="">
                        <span class="nav-text">生鲜专区</span>
                    </span>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--限时抢购-->
        <div class="flash-sale">
            <div class="fs-list">
                <div class="fs-item" @click="Limited(dataX.id)">
                    <div class="fs-title">
                        <div class="fs-logo">
                            <img src="../assets/images/flash_sale/fs_logo.png" alt="">
                        </div>
                        <div class="count-down">
                           <count-down :endTime="1554887784" :callback='timeEnd' endText="已经结束了"></count-down>
                            <!-- <span class="count-time">02</span>：<span class="count-time">18</span>：<span
                                class="count-time">36</span> -->
                        </div>
                    </div>
                    <div class="start-date">
                        <span class="date-icon"></span>
                        <span class="date-text"><span class="date">08:00</span>点场</span>
                    </div>
                    <div class="fs-preview">
                        <img :src="dataX.img" alt="">
                    </div>
                </div>
                <div class="fs-item fs-goods">
                    <div class="goods-item" @click="Limitd(item.id)" v-for="(item,index) in datax" :key="index">
                        <div class="goods-title">{{item.name}}</div>
                        <div class="goods-price">低至{{item.sale}}元</div>
                        <div class="goods-img">
                            <img :src="item.img" alt="">
                        </div>
                    </div>
                    <!-- <div class="goods-item goods-item2">
                        <div class="goods-title"></div>
                        <div class="goods-price"></div>
                        <div class="goods-img goods-imgs">
                            <img src="../assets/images/flash_sale/goods_0.png" alt="">
                        </div>
                    </div>
                    <div class="goods-item">
                        <div class="goods-title">越南芒果</div>
                        <div class="goods-price">平价出售</div>
                        <div class="goods-img">
                            <img src="../assets/images/flash_sale/goods_0.png" alt="">
                        </div>
                    </div>
                    <div class="goods-item">
                        <div class="goods-title">无花果</div>
                        <div class="goods-price">4.5元</div>
                        <div class="goods-img">
                            <img src="../assets/images/flash_sale/goods_0.png" alt="">
                        </div>
                    </div> -->
                    <!-- <div class="line1">
                    </div>
                    <div class="line2">
                    </div> -->
                </div>
            </div>
        </div>
        <!--拼团抢购-->
        <div class="asmls">
          <div class="assemble">
              <div class="assemble-title">
                  <div class="assemble-logo">
                      <img src="../assets/images/assemble/logo_icon.png" alt="">
                      <span class="assemble-date">距离结束
                           <count-down :endTime="1554887784" :callback='timeEnd' endText="已经结束了"></count-down>
                        <!-- <span class="date">02</span>：<span class="date">18</span>：<span
                              class="date">36</span> -->
                      </span>
                  </div>
                  <span @click="goToPin" class="assemble-all">全部<van-icon name="arrow"/></span>
              </div>
              <div class="assemble-list">
                <a href="###">
                  <div class="assemble-item" @click="Fgroup(item.gid)" v-for="(item,index) in datas" :key="index">
                      <div class="a-img">
                          <img :src="item.img" alt="">
                      </div>
                      <div class="a-desc">
                          <div class="a-dsc"><p class="a-title">{{item.name}}</p><span class="p-t">{{item.num}}人团</span></div>
                          <p class="a-t"><span class="t">{{item.assemble_num}}</span>人正在拼团</p>
                          <p class="a-s-price">{{item.price}}元/份</p>
                          <div class="bottom">
                              <s class="a-d-price">单买价&nbsp;{{item.market_price}}元/份</s>
                              <van-button size="normal">立即开团</van-button>
                          </div>
                      </div>
                      <div class="line"></div>
                  </div>
                  </a>
                  <!-- <div class="assemble-item">
                      <div class="a-img">
                          <img src="../assets/images/assemble/goods_03.png" alt="">
                      </div>
                      <div class="a-desc">
                          <p class="a-title">新疆阿克苏冰糖心丑苹果4斤<span class="p-t">3人团</span></p>
                          <p class="a-t"><span class="t">79</span>人正在拼团</p>
                          <p class="a-s-price">29.00元/份</p>
                          <div class="bottom">
                              <s class="a-d-price">单买价&nbsp;48元/份</s>
                              <van-button size="normal">立即开团</van-button>
                          </div>
                      </div>
                  </div> -->
              </div>
          </div>
          <!--新鲜水果链接-->
          <router-link to="/" class="new-fruits-link">
              <img src="../assets/images/newfruits/fruits_03.png" alt="">
          </router-link>
        </div>
        <!--新品推荐-->
        <div class="new-recommend">
            <div class="n-r-title">新品推荐</div>
            <div class="n-r-list">
                <van-row>
                  <van-col  span="8" class="n-r-item" v-for="(item,index) in newList" :key="index">
                    <a @click="goo(item.id)">
                      <div class="n-r-item-img">
                          <img :src="item.img" alt="item.name">
                      </div>
                      <p class="n-r-item-title">{{item.name }}</p>
                      <p class="n-r-item-price">¥{{item.store_nums}}/个</p>
                      <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </a>
                  </van-col>
                    <!-- <van-col span="8" class="n-r-item">
                        <div class="n-r-item-img">
                            <img src="../assets/images/newfruits/new_07.png" alt="">
                        </div>
                        <p class="n-r-item-title">南非进口血橙</p>
                        <p class="n-r-item-price">¥10/个</p>
                        <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </van-col>
                    <van-col span="8" class="n-r-item">
                        <div class="n-r-item-img">
                            <img src="../assets/images/newfruits/new_07.png" alt="">
                        </div>
                        <p class="n-r-item-title">南非进口血橙</p>
                        <p class="n-r-item-price">¥10/个</p>
                        <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </van-col> -->
                </van-row>
                <!-- <van-row> -->
                    <!-- <van-col span="8" class="n-r-item">
                        <div class="n-r-item-img">
                            <img src="../assets/images/newfruits/new_07.png" alt="">
                        </div>
                        <p class="n-r-item-title">{{listarr.category_name}}</p>
                        <p class="n-r-item-price">¥10/个</p>
                        <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </van-col>
                    <van-col span="8" class="n-r-item">
                        <div class="n-r-item-img">
                            <img src="../assets/images/newfruits/new_07.png" alt="">
                        </div>
                        <p class="n-r-item-title">南非进口血橙</p>
                        <p class="n-r-item-price">¥10/个</p>
                        <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </van-col>
                    <van-col span="8" class="n-r-item">
                        <div class="n-r-item-img">
                            <img src="../assets/images/newfruits/new_07.png" alt="">
                        </div>
                        <p class="n-r-item-title">南非进口血橙</p>
                        <p class="n-r-item-price">¥10/个</p>
                        <img src="../assets/images/newfruits/popularity_icon.png" class="popularity" alt="">
                    </van-col> -->
                <!-- </van-row> -->
            </div>
        </div>
        <div class="guess">
            <div class="guess-title">猜你喜欢</div>
            <div class="g-content">
                <div class="g-banner">
                    <img src="../assets/images/guess/guess_banner.png" alt="">
                </div>
                <div class="g-list">
                      <div @click="goo(item.id)" class="g-item" v-for="(item,index) in listarr" :key="index">
                        <div class="g-img">
                          <img :src="item.img" alt="item.name">
                        </div>
                        <div class="g-desc">
                            <p class="g-title">{{item.name}}
                            <p class="g-sub-t">{{item.category_name}}</p>
                            <p class="g-s-price"><span class="g-prefe">特惠</span>{{item.sell_price}}元/份</p>
                        </div>
                      </div>
                    <!-- <div class="g-item">
                        <div class="g-img">
                            <img src="../assets/images/assemble/goods_03.png" alt="">
                        </div>
                        <div class="g-desc">
                            <p class="g-title">新疆阿克苏冰糖心丑苹果4斤</p>
                            <p class="g-sub-t">泰国红荔枝&nbsp;进口新鲜水果</p>
                            <p class="g-s-price"><span class="g-prefe">特惠</span>29.00元/份</p>
                        </div>
                    </div>
                    <div class="g-item">
                        <div class="g-img">
                            <img src="../assets/images/assemble/goods_03.png" alt="">
                        </div>
                        <div class="g-desc">
                            <p class="g-title">新疆阿克苏冰糖心丑苹果4斤</p>
                            <p class="g-sub-t">泰国红荔枝&nbsp;进口新鲜水果</p>
                            <p class="g-s-price"><span class="g-prefe">特惠</span>29.00元/份</p>
                        </div>
                    </div>
                    <div class="g-item">
                        <div class="g-img">
                            <img src="../assets/images/assemble/goods_03.png" alt="">
                        </div>
                        <div class="g-desc">
                            <p class="g-title">新疆阿克苏冰糖心丑苹果4斤</p>
                            <p class="g-sub-t">泰国红荔枝&nbsp;进口新鲜水果</p>
                            <p class="g-s-price"><span class="g-prefe">特惠</span>29.00元/份</p>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <footer-nav :active="1"></footer-nav>
    </div>
     <!-- 选择省区 -->
    <div v-if="showArea" class="area">
      <van-area value="110101" :area-list="areaList" :columns-num="3" @confirm="onConfirm" @cancel="onCancel"/>
    </div>
    <div v-if="showArea" class="areaShadow" @click.stop="onCancel()"></div>
  </div>
</template>

<script>
  import FooterNav from '../components/FooterNav'
  import axios from '../../static/request.js'
  import countDown from '@/components/daojishi/daojishi'
  import area from "../../static/area.js";
  export default {
  name: "Mall",
  components: {
      FooterNav,
      countDown
  },
  data() {
    return {
      searchText: '',
      navLoop: false,
      listarr:'',
      id:0,
      dataX:'',       //限时抢购第一个商品
      datax:[],       //限时抢购剩下的四个商品
      datas:'',  // 拼团
      datslist:'',   // 限时
      Timers: '2019-03-31 18:00:00',   //设置限时抢购结束时间
      endTimes:0,     //限时抢购结束时间转为时间戳
      Timers1: '2019-03-31 18:00:00',   //设拼团时抢购结束时间
      endTimes1:0,   //拼团抢购结束时间转为时间戳
      newList:'',     //新品列表
      ceshi:'拼团抢购结束时间转为时间戳拼团抢购结束时间转为时间戳',
      myPosition: '',           // 定位
      showArea: false,          //手动选择定位显示
      areaList: area,      //地区
    }
  },
  methods:{
     // 地址选择确定
    onConfirm(e){
      this.showArea = false;
      this.myPosition = e[1].name;
      localStorage.setItem('myPosition',JSON.stringify(this.myPosition))
    },
    // 地址选择取消
    onCancel(){
      this.showArea = false;
    },
    goo(id){
      axios({
        url:'?controller=theapi&action=goods',
        method: 'get',
        params: {
          gid:8,
        }
      }).then(res=>{
        console.log(res.data.data);
        this.$router.push({
          name:'ProductDetails',
          params:{
            id: id,
            page:2
          }
        })
      });
    },
    search1(){
      // 搜索
      console.log(this.searchText)
      this.$router.push({
        name:'searchlist',
        params:{
          id: this.searchText
        }
      })
    },
    Limited(id){
      // 限时抢购左1
      this.$router.push({
        name:'ProductDetails',
        params:{
          id: id,
          page:2
        }
      })
    },
    Limitd(id){
      // 限时抢购右4个
      this.$router.push({
        name:'ProductDetails',
        params:{
          id: id,
          page:2
        }
      })
    },
    Fgroup(id){
      // 拼团
      this.$router.push({
        name:'Group-details',
        params:{
          id: id
        }
      })
    },
    // 拼团优惠
    goToPin(){
       this.$router.push('groupList');
    },
    toxpcx(){
      // 新品尝鲜
      window.location.href="http://app.ztsx123.com/1/#/twentyfive"
      // window.location.href="http://localhost:8081/#/twentyfive"
    },
    toptqg(){
      // 拼团优惠
      // window.location.href="http://app.ztsx123.com/1/#/pintuanyouhui"
      this.$router.push('groupList');
    },
    toxsqg(){
      window.location.href="http://app.ztsx123.com/1/#/twentyfour"
    },
    tolhb(){
      window.location.href="http://app.ztsx123.com/1/#/qiandao"
    },
    totxzq(){
      // window.location.href="http://app.ztsx123.com/1/#/fifteen"
      this.$router.push('texiangzhuanqu');
    },
    tofoodzhuanqu(){
        window.location.href="http://app.ztsx123.com/1/#/foodzhuanqu"
    },
    toshengxianzhuanqu(){
        window.location.href="http://app.ztsx123.com/1/#/shengxianzhuanqu"
    },
    timeEnd(){
      console.log('倒计时结束')
    },
    classe(){
      this.$router.push({
        name:'Goods-classify',
        params:{

        }
      })
    },
     // 手动定位
    positioning(){
      this.showArea = true;
    },
    getMyPosition(){
      let position = JSON.parse(localStorage.getItem('myPosition'))
      if(!position){
        Dialog.confirm({
          title: '提示',
          message: '授权获取位置信息'
        }).then(() => {
          // on confirm
          let _this = this
          let geolocation = new BMap.Geolocation();
          function myFun(result){
            let cityName = result.name;
            _this.myPosition = cityName;
            localStorage.setItem('myPosition',JSON.stringify(cityName))
          }
          let myCity = new BMap.LocalCity();
          myCity.get(myFun);
        }).catch(() => {
          Toast('获取定位失败')
        })
      }else{
        this.myPosition = position
      }
    }
  },
  created(){
    // 定位
    this.$nextTick(() => {
      this.getMyPosition()
    })
    // 时间转换时间戳
    let newTime = new Date(this.Timers)
    this.endTimes = Number(Date.parse(newTime) / 1000);
    let newTime1 = new Date(this.Timers1)
    this.endTimes1 = Number(Date.parse(newTime1) / 1000);
    // 商品列表
    axios({
      url:'?controller=theapi&action=goods_list',
      method: 'get',
      params: {
        cid:1,
      }
    }).then(res=>{
      console.log(res,'商品列表');
      this.listarr = res.data.data;
      this.id = this.listarr.id;
    });
    // 新品尝鲜
    axios({
      url:'?controller=theapi&action=new_goods',
      method: 'get',
      params: {
        limit:6,
      }
    }).then(res=>{
      this.newList = res.data.data;
      console.log(res)
    });
    // 限时抢购
    axios({
      url:'?controller=theapi&action=qianggoods',
      method: 'get',
      params: {
        // time:this.Timers,
      }
    }).then(res=>{
      console.log(res)
      this.datslist = res.data.data;
      this.dataX = this.datslist[0];
      console.log(this.dataX);
      for(let i = 1;i < this.datslist.length;i++){
        for(let j = 0;j < i;j++){
          if(i < 5){
            this.datax[j] = this.datslist[i];
          }
        }
      }
      // this.listarr = res.data.data;
      // this.id = this.listarr.id;
    });
    // 拼团
    axios({
      url:'?controller=theapi3&action=assembleGoods',
      method: 'get',
      params: {
        limit:6,
      }
    }).then(res=>{
      console.log(res)
      this.datas = res.data.data;
      // this.listarr = res.data.data;
      // this.id = this.listarr.id;
    });
    // 轮播
    // axios({
    //   url:'?controller=theapi&action=bannerlist',
    //   method: 'get',
    //   params: {

    //   }
    // }).then(res=>{
    //   console.log(res)
    // });
  },

}
</script>

<style scoped>
    .page {
        padding: 0.1rem .3rem 50px;
    }

    .header {
        width: 100%;
        height: .88rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: #fff;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .header .header-item {
        webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        line-height: 1;
        font-size: .32rem;
        color: #191E2A;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .header .location-icon {
        font-size: .32rem;
        color: #F52E67;
        margin-right: .15rem;
    }

    .header .location-text {
        font-size: 0.3rem;
        color: #191E2A;
        white-space: nowrap;
        overflow: hidden;
    }

    .header .scan-share-content {
        justify-content: flex-end;
    }

    .scan-share-content .scan-icon,
    .scan-share-content .share-icon {
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .scan-icon {
        width: .4rem;
        height: .32rem;
        background-image: url("../assets/images/header/scan_icon.png");
    }

    .share-icon {
        width: .6rem;
        height: .6rem;
        background-image: url("../assets/images/header/share_icon.png");
        margin-left: .32rem;
    }

    .search {
        height: .35rem;
        margin-bottom: 0.6rem;
    }
    .inputa{
      background: #f8f8f8;
      height: .75rem;
      border-radius: 0.2rem;
    }
    .bginput{
      position: absolute;
      width: 100%;
      height: 2rem;
      background: #f8f8f8;
      top: 10%;
      z-index: -1;
    }
    .camera-content{
      width: 0.6rem;
      height: 0.6rem;
      display: flex;
      justify-content: center;
      background: rgba(0, 0, 0, 0)
    }
    .camera-content img {
        width: .42rem;
        height: .36rem;
        margin: 0 auto;
        /* vertical-align: middle; */
    }
     .search-content{
        border: none;
        background: rgba(0, 0, 0, 0);
     }
    .search-content .van-button--default {
        border: none;
    }

    .banner {
        margin-top: 0.3rem;
    }
    .banner .van-swipe-item img {
        max-width: 100%;
        max-height: 100%;
    }

    .nav-list {
        width: 100%;
        height: 1.8rem;
        margin-top: .08rem;
    }

    .nav-list .van-swipe {
        height: 100%;
    }

    .nav-list .van-swipe__track {
        height: 1.28rem;
    }

    .nav-list .van-swipe-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: #fff;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .nav-list .nav-item {
        webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        text-align: center;
        padding-top: .15rem;
    }

    .nav-list .item-img {
        width: .84rem;
        height: .84rem;
    }

    .nav-list .nav-text {
        display: block;
        text-align: center;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .fs-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background-color: #fff;
        margin-top: .2rem;
        border: 0.01rem solid #eee;
        border-radius: 0.3rem;
        box-shadow: 0rem 0.1rem 0.1rem #eee;
    }

    .fs-list .fs-item {
        webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        /* padding: .2rem; */

    }
    .fs-list .fs-item:nth-child(1){
      border-right: 0.01rem solid #eee;
      padding: .2rem;
    }
    .asmls{
      border: 0.01rem solid #eee;
      margin: 0.3rem 0;
      border-radius: 0.3rem;
      box-shadow: 0rem 0.1rem 0.1rem #eee;
    }
    .fs-item .fs-title, .assemble .assemble-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        justify-content: space-between;
        /* border-bottom: 0.01rem solid #eee; */
    }

    .fs-logo img, .assemble-logo img {
        width: 1.32rem;
        height: .5rem;
    }

    .count-down {
        font-size: .24rem;
        color: #22262F;
    }

    .count-down span.count-time, .assemble-date .date {
        display: inline-block;
        background: #22262F;
        color: #fff;
        border-radius: 2px;
        padding: 1px 2px;
    }

    .start-date .date-icon {
        display: inline-block;
        width: .24rem;
        height: .24rem;
        background: url("../assets/images/flash_sale/count_down_icon.png") no-repeat top center / 100%;
    }

    .start-date .date-text {
        font-size: .24rem;
        color: #63666B;
        line-height: 1.5;
    }

    .start-date .date {
        font-weight: bold;
        padding-right: 5px;
    }

    .fs-item .fs-preview {
        padding-top: .6rem;
        /* padding-left: .3rem; */
        text-align: center;
    }
    .fs-item div:nth-last-child(1){
      text-align: center;
    }
    .fs-item .fs-preview img {
        max-width: 3rem;
        max-height: 2.2rem;
    }
    .fs-goods{
      overflow: hidden;
    }
    .fs-goods div:nth-child(2){
      position: relative;
    }
    .fs-goods div:nth-child(2) img{
      position: absolute;
      bottom: 0;
      left: 10%;
    }
    .fs-goods div:nth-child(2) .goods-title,
    .fs-goods div:nth-child(2) .goods-price{
      display: none;
    }
    .fs-goods>div:nth-child(3){
      border-right: 0.01rem solid #eee;
    }
    .fs-goods>div:nth-child(n+3){
      border-top: 0.01rem solid #eee;
    }
    .fs-item.fs-goods {
        display: flex;
        flex-wrap: wrap;
        /*设置主轴上的排列*/
        justify-content: space-between;
        align-content: space-between; /*整体上下两端对齐*/
        position: relative;
    }

    .fs-goods .goods-item {
        width: 49.8%;
        text-align: center;
        padding-top: .2rem;
    }
    .line1{
      position: absolute;
      width: 100%;
      height: 0.1%;
      background: #eee;
      left: 0;
      top: 45%;
    }
    .line2{
      position: absolute;
      width: 0.2%;
      height: 50%;
      background: #eee;
      left: 49.4%;
      top: 46%;
    }
    .goods-item .goods-title {
        font-size: .28rem;
        margin: 0 auto;
        font-weight: bold;
        color: #191E2A;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:1.4rem;
    }
    .goods-item .goods-title:nth-last-child(1){
      margin-right: 0rem;
      margin-left: 0.1rem;
    }
    /* .goods-item2{
      position: relative;
    }
    .goods-item2 img{
      position: absolute;
      bottom: 0;
      left: 10%;
    } */
    .goods-item .goods-price {
        font-size: .22rem;
        color: #F52E67;
    }

    .goods-item .goods-img img {
        max-width: 1.26rem;
        max-height: 1.16rem;
    }
    .assemble {
        margin-top: .2rem;
    }

    .assemble-title {
        padding: .2rem;
    }

    .assemble-logo, .assemble-all {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        font-size: 0.25rem;
    }

    .assemble-date {
        margin-left: .4rem;
        font-size: .24rem;
    }

    .assemble-all .van-icon {
        line-height: 1.5;
    }

    .assemble-item,.g-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        padding: .3rem .3rem .3rem .3rem;
    }
    .assemble-item{
      position: relative;
    }
    .line{
      position: absolute;
      border-bottom: 0.01rem solid #eee;
      width: 93%;
      height: 1%;
      bottom: 0;
      right: 0;
    }
    .assemble-item .a-img, .g-item .g-img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        webkit-box-flex: 0.33;
        -ms-flex: 0.33;
        flex: 0.33;
        justify-content: center;
        align-items: center;
    }

    .assemble-item .a-desc, .g-item .g-desc {
        webkit-box-flex: 0.67;
        -ms-flex: 0.67;
        flex: 0.67;
    }

    .a-img img, .g-img img {
        max-width: 1.7rem;
        max-height: 1.7rem;
    }
    .a-dsc{
      display: flex;
    }
    .a-title,.g-title {
        font-size: .26rem;
        color: #000;
        font-weight: bold;
        overflow: hidden;
    }
    .g-title{
      margin-left: 0.1rem;
    }
    .a-title{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      /* width:1.3rem; */
    }
    .a-title .g-prefe,.p-t {
        display: inline-block;
        padding: 1px 7px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
        font-size: .2rem;
        color: #fff;
        font-weight: normal;
        background: #F52E67;
    }
    .p-t{
      margin-left: 0.1rem;
    }
    .a-t {
        font-size: .22rem;
        line-height: 1.6;
    }

    .t ,.t{
        color: #F52E67;
        font-weight: bold;
    }

    .a-s-price , .g-s-price {
        font-size: .26rem;
        font-weight: bold;
        color: #F52E67;
    }

    .bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .a-d-price {
        font-size: .22rem;
        color: #B3B5B8;
    }

    .bottom .van-button {
        height: auto;
        padding: 0;
        border: none;
        color: #F52E67;
        font-weight: bold;
    }

    .new-fruits-link {
        display: block;
        text-align: center;
        margin-bottom: 0.3rem;
    }

    .new-fruits-link img {
        max-width: 96%;
    }

    .new-recommend {
        margin-top: .2rem;
    }

    .new-recommend .n-r-title, .guess .guess-title {
        font-size: .32rem;
        font-weight: bold;
        border-left: 2px solid #F52E67;
        padding-left: .2rem;
    }
    .g-list>div{
      border-bottom: 0.01rem solid #eee;
    }
    .g-list>div:nth-last-child(1){
      border-bottom: 0rem solid #eee;
    }
    .g-content{
      border: 0.01rem solid #eee;
      border-radius: 0.3rem;
      margin-bottom: 0.6rem;
      box-shadow: 0rem 0.1rem 0.1rem #eee;
      margin-top: 0.2rem;
    }
    .n-r-list {
        /* padding: .2rem 0; */
        border: 0.01rem solid #eee;
        border-radius: 0.3rem;
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;
        box-shadow: 0rem 0.1rem 0.1rem #eee;
    }
    .n-r-list  .n-r-item:nth-child(n - 3){
      border-bottom: 0.01rem solid #eee;
    }
    .n-r-list .n-r-item:nth-child(1),
    .n-r-list .n-r-item:nth-child(2),
    .n-r-list .n-r-item:nth-child(4),
    .n-r-list .n-r-item:nth-child(5)
    {
      border-right: 0.01rem solid #eee;
    }
    .n-r-item {
        position: relative;
        padding: .16rem 0;
    }

    .n-r-list .n-r-item-img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0 auto;
        text-align: center;
        padding: .2rem 0;
    }

    .n-r-item-img img {
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }

    .n-r-item-title, .n-r-item-price {
        text-align: center;
        line-height: 2;
    }

    .n-r-item-title {
        font-size: .26rem;
        color: #191E2A;
        font-weight: bold;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:2rem;
        text-align: center;
        margin: 0 auto;
    }

    .n-r-item-price {
        font-size: .22rem;
        color: #F52E67;
    }

    .popularity {
        position: absolute;
        top: 0;
        right: 0;
        width: .6rem;
    }
    .g-banner {
        text-align: center;
    }
    .g-title {
        line-height: 2;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        width:2rem;
    }

    .g-banner img {
        max-width: 100%;
    }
    .g-sub-t {
        font-size: 0.22rem;
        color: #B3B5B8;
        line-height: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .g-s-price {
        padding-top: 6px;
    }
    .g-prefe {
      display: inline-block;
        margin-right: 5px;
        font-size: .26rem;
        background: #F52E67;
        color: #fff;
        border-radius: 0.3rem;
        width: 1rem;
        text-align: center;
    }
    .inputa input{
      background: rgb(5, 5, 5) !important;
    }

    .area{
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 222;
    }
    .areaShadow{
      position: fixed;
      top:0;
      height: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
      z-index: 2;
    }
</style>
